<template>
  <div>
    <div class="option-box">
        <el-button type="primary" v-has="'area:add'" @click="addArea">添加</el-button>
    </div>

    <TreeTable :data="treeData" stripe>
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <ExpandIcon :row="scope.row" :index="scope.$index"/>
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column prop="seq" label="排序号" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" v-has="'area:update'" @click="editArea(scope.$index, scope.row)">编辑</el-button>
          <el-button class="text-button-del" v-has="'area:delete'" type="text" @click="delArea(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </TreeTable>

    <!--dialog弹窗-->
    <el-dialog :title="dialog.dialogTitle"
      :visible.sync="dialog.dialogVisible"
      width="680px"
      :modal-append-to-body=false
      :close-on-click-modal=false
      :close-on-press-escape=false>
      <el-form ref="areaForm" :model="areaForm" :inline=true :rules="areaFormRules" label-position="right" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="areaForm.name" placeholder="请输入名称" class="handle-input"></el-input>
        </el-form-item>
        <el-form-item label="父节点" prop="parentId">
          <el-input v-model="areaForm.parentName" readonly="true" class="handle-icon">
            <el-button @click="openInnerDialog" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="排序号">
          <el-input v-model="areaForm.seq" placeholder="请输入排序号" class="handle-input"></el-input>
        </el-form-item>
      </el-form>

        <!--内层dialog-->
        <el-dialog title="选择父节点"
          :visible.sync="dialog.innerVisible"
          width="20%"
          append-to-body>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            :default-expand-all=true
            :highlight-current=true
            :expand-on-click-node=false
            node-key="id"
            ref="areaTree">
          </el-tree>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialog.innerVisible = false">取 消</el-button>
            <el-button type="primary" @click="selectParent">确 定</el-button>
          </span>
        </el-dialog>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="dialog.submitLoading"  @click="areaFormSubmit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as area from '@/api/area'
import {TreeTable, ExpandIcon} from '@/components/TreeTable'
import {mapGetters} from 'vuex'

export default {
  name: 'AreaList',
  components: {TreeTable, ExpandIcon},
  data () {
    return {
      areaForm: {
        id: '',
        name: '',
        parentId: '',
        seq: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData: [], // 表格数据
      dialog: {
        dialogVisible: false, // 弹窗
        dialogTitle: '', // 弹窗标题
        submitLoading: false,
        innerVisible: false // 内层弹框

      },
      isEdit: false, // 是否为修改操作
      tableLoading: true,

      areaFormRules: {
        name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
        parentId: [{required: true, message: '父节点不能为空', trigger: 'blur'}],
      }
    }
  },
  methods: {
    transformDict (key, code) {
      return this.dictinfo(key, code);
    },
    search () {
      // this.pageNum = this.GLOBAL.pageNum;
      this.getTree();
    },
    getTree () {
      area.treeData().then(res => {
        this.treeData = [...res.data];
      });
    },
    addArea () {
      this.isEdit = false;
      this.dialog.dialogTitle = '添加';
      this.GLOBAL.clearObject(this.areaForm);
      this.dialog.dialogVisible = true;
    },
    editArea (index, row) {
      this.isEdit = true;
      this.dialog.dialogTitle = '编辑';
      this.GLOBAL.clearObject(this.areaForm);
      area.getById(row.id).then(res => {
        this.areaForm = res.data;
        this.areaForm.parentName = row.parent ? row.parent.name : '';
        this.areaForm.deptName = row.deptName;
        this.dialog.dialogVisible = true;
      });
    },
    delArea (index, row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          area.delArea(row.id)
            .then(res => {
              this.$message.success('删除成功');
              this.getTree();
            });
        })
    },
    openInnerDialog () {
        this.dialog.innerVisible = true;
    },
    selectParent () {
        let parentNode = this.$refs.areaTree.getCurrentNode();
        if (parentNode) {
            this.areaForm.parentId = parentNode.id;
            this.areaForm.parentName = parentNode.name;
        }
        this.dialog.innerVisible = false;
    },
    areaFormSubmit () {
      this.$refs.areaForm.validate((valid) => {
        if (valid) {
          this.dialog.submitLoading = true;
          let param = this.GLOBAL.handlerQueryParam({
            ...this.areaForm
          });
          if (this.isEdit) {
            area.editArea(param)
              .then(res => {
                this.dialog.submitLoading = false;
                this.dialog.dialogVisible = false;
                this.getTree();
              })
              .catch(() => {
                this.dialog.submitLoading = false;
              })
          } else {
            area.addArea(param)
              .then(res => {
                this.dialog.submitLoading = false;
                this.dialog.dialogVisible = false;
                this.getTree();
              })
              .catch(() => {
                this.dialog.submitLoading = false;
              });
          }
        }
      });
    }
  },
  created () {
    this.getTree();
  },
  computed: {
    ...mapGetters(['dictinfo', 'dictList']),
  }
}
</script>

<style lang="scss" scoped>

</style>
